<template>
  <div class="content">
    <common-header></common-header>

    <!-- 搜索框区域 -->
    <searchBox></searchBox>
    
    <div class="home-content">
       <!-- 面包屑 -->
     <!-- <div class="mianbao">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/pagesContent' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人中心</el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->
      <!-- 分类-->
       <div class="dahezi">
        <div class="classifybox">
          <el-menu
            :default-active="user.currentmenu"
            :default-openeds="arropen"
            router
            class="el-menu-vertical-demo"
            >
             <el-menu-item index="1"  route="/personalCenter/myorder">
                <span slot="title">保险订单</span>
              </el-menu-item> 
            <!--<el-submenu index="2">
              <template slot="title">
                <span>个人中心</span>
              </template>
              <el-menu-item index="2-1" route="/personalCenter/mymoney">
                <span slot="title">我的分润</span>
              </el-menu-item>
              <el-menu-item index="2-2" route="/personalCenter/discountCoupons">
                <span slot="title">优惠券</span>
              </el-menu-item>
               <el-menu-item index="2-3" route="/personalCenter/message">
                <span slot="title">消息通知</span>
              </el-menu-item> 
              <el-menu-item index="2-4" route="/personalCenter/setting">
                <span slot="title">我的信息</span>
              </el-menu-item>
              <el-menu-item index="2-5" route="/personalCenter/address">
                <span slot="title">收货地址</span>
              </el-menu-item>
            </el-submenu>-->
            
          </el-menu>
        </div>
        <!-- hezi  -->
        <div class="hezi">
          <transition name="fade" appear>
            <router-view></router-view>
          </transition>
        </div>
       </div>
      
     
    </div>
    <common-footer></common-footer>
  </div>
</template>

<script>
import commonHeader from "@/components/commonHeader"
import commonFooter from "@/components/commonFooter"
import { mapState, mapActions } from 'vuex';
import searchBox from "./components/searchBox";

export default {
  name: "personalCenter",//个人中心 
  components: { searchBox,commonHeader, commonFooter },
  data() {
    return {
      items: [], // 存储数据的数组
      loading: false, // 加载状态
      arropen:['1',],
    };
  },
  computed: {
    ...mapState(['user']),
    
  },
 

  created() {

  },
  methods: {
    
    loadMore() {
      if (this.loading) return; // 防止重复加载
      this.loading = true;
      // 模拟加载数据
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, i) => ({ id: this.items.length + i + 1, value: `Item ${this.items.length + i + 1}` }));
        this.items = [...this.items, ...newItems];
        this.loading = false;
      }, 1000);
    },
    handleScroll(event) {
      const target = event.target; // 确保是在正确的元素上触发事件，例如一个列表容器或div元素。
      if (target.scrollHeight - target.scrollTop <= target.clientHeight) { // 检查是否到达底部或接近底部
        this.loadMore();
      }
    }
  },
  mounted() {
    // this.$nextTick(() => { // 确保DOM已经渲染完毕，然后添加监听器到特定的DOM元素上。例如，如果你有一个id为"list"的div元素。
    //   const listElement = this.$refs.list; // 使用ref来引用元素。确保在模板中有一个<div ref="list" @scroll="handleScroll">包裹你的列表项</div>。
    //   listElement.addEventListener('scroll', this.handleScroll);
    // });
  },
  beforeDestroy() {
    // const listElement = this.$refs.list; // 移除监听器。确保你有这个引用。如果没有，你需要重新获取它。例如，通过document.getElementById或其他方式。
    // listElement && listElement.removeEventListener('scroll', this.handleScroll); // 使用条件运算符确保元素存在。
  }
};
</script>
<style scoped lang="scss">
.content{
  // padding-bottom: 45px;
    background: #fff;
  .home-content{
    width: 100%;
    height: calc(100vh - 260px);
    background: #fff;
    padding-top: 1px;
    .mianbao{
      max-width: 1200px;
      margin: 16px auto;
    }
    .dahezi{
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }
    .classifybox{
      width: 200px;
      height: calc(100vh - 310px);
      background: #FFFFFF;
      box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.08);
      border-radius: 16px 16px 16px 16px;
      overflow-y: auto;
      margin-right: 16px;
    }
    .hezi{
      width: 984px;
      min-height: calc(100vh - 310px);
      background: #FFFFFF;
      box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.08);
      border-radius: 16px 16px 16px 16px;
    }
  }

}
</style>
